/*
 * @Author: ZhaoZhiqi
 * @Date: 2023-11-07 18:10:12
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2023-11-07 19:08:04
 * @Description: 
 * @FilePath: \lumos-admin\src\components\MyPopover\index.jsx
 */
import { Stack, Button, Popover, Flex, Text } from '@mantine/core';
import { IconAlertCircle } from '@tabler/icons-react';
import { useState } from 'react';

export function MyPopover({ onConfirm, children }) {
    const [value, setValue] = useState(false)
    return (
        <Popover opened={value} radius={8} shadow='sm' withArrow arrowSize={10} onClose={() => setValue(false)}>
            <Popover.Target>
                <div onClick={() => setValue(true)}>
                    {children}
                </div>
            </Popover.Target>
            <Popover.Dropdown>
                <Stack style={{ paddingTop: 5 }} align="flex-end">
                    <Flex align="center">
                        <IconAlertCircle size={22} color='red' style={{ marginRight: 5 }} />
                        <Text style={{ marginRight: 30 }} size='sm' c="#333">确认删除吗?</Text>
                    </Flex>
                    <Flex>
                        <Button style={{ marginRight: 5, fontSize: 12 }} variant="subtle" size="compact-sm" color="#999" onClick={() => setValue(false)}>取消</Button>
                        <Button style={{ fontSize: 12 }} size="compact-sm" color="pale-blue" onClick={() => onConfirm()}>确认</Button>
                    </Flex>
                </Stack>
            </Popover.Dropdown>
        </Popover>
    )
}